<!--<template>-->
<!--	<div class="container-fluid">-->
<!--		<h1>智云医汇管理系统，欢迎您！！！ </h1> -->
<!--	</div>-->
<!--</template>-->

<template>
  <div style="min-height: 80vh" class="container-fluid">
    <!-- <input type="text" v-model="scale"> -->
    <!-- <div class="d-flex justify-content-end">
			<button class="btn btn-primary mx-2" @click="scale+=0.5">放大</button>
			<button class="btn btn-primary" @click="reduce">缩小</button>
			<button class="btn btn-primary mx-2" @click="toggleAxesHelper">{{status ? '隐藏坐标系' : '显示坐标系'}}</button>
		</div> -->
    <!-- <vueCropper
        ref="cropper"
        :img="option.img"
        autoCrop
        centerBox
        :outputSize="option.size"
        :outputType="option.outputType"
    ></vueCropper>
    <img :src="img" alt="">
    <button class="btn btn-primary" @click="startCrop">截图</button> -->
    <!-- <model-list :dataList="modelDataList"></model-list> -->
    <!-- <model-stl ref="model" src="https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BA%95%E5%BA%A7.stl" @on-mousemove="onMouseMove" :scale="{x:scale,y:scale,z:scale}"
			:lights="[{type:'DirectionalLight',color:0xFFFFFF,intensity:1,decay:0,position:light}]">
		</model-stl> -->
    <div style="width: 50vw">
      <model-gltf :src="imgSrc"></model-gltf>
    </div>
    <div class="flex justify-content-center" style="width: 50vw">
      <button type="button" class="btn btn-primary" @click="toggleSrc(0)">
        切换第一个模型
      </button>
      <button type="button" class="btn btn-primary mx-3" @click="toggleSrc(1)">
        切换第二个模型
      </button>
      <button type="button" class="btn btn-primary" @click="toggleSrc(2)">
        切换第三个模型
      </button>
    </div>
  </div>
</template>

<script>
// import { VueCropper }  from 'vue-cropper'
import { AxesHelper } from "three";
// import {
// 	// ModelStl,
// 	ModelGltf
// } from 'vue-3d-model';
// import modelList from '@/components/modelList'
import ModelGltf from "@/components/model-gltf";
export default {
  data() {
    return {
      arr: [
        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BF%83%E8%84%8F-%E4%B8%8A.glb",

        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BF%83%E8%84%8F-%E4%B8%8B.glb",

        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BA%95%E5%BA%A7.glb",
      ],
      imgSrc:
        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BF%83%E8%84%8F-%E4%B8%8A.glb",
      modelDataList: [
        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BA%95%E5%BA%A7.stl",
        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BF%83%E8%84%8F-%E4%B8%8B.stl",
        "https://m3dc.oss-cn-beijing.aliyuncs.com/devops/%E5%BF%83%E8%84%8F-%E4%B8%8A.stl",
      ],
      option: {
        img: "https://pic1.zhimg.com/da8e974dc_xs.jpg?source=172ae18b",
        outputSize: 1,
        outputType: "png",
      },
      img: "",
      intersected: null,
      light: {
        x: 0,
        y: 0,
        z: 100,
      },
      scale: 0.5,
      axesHelper: null,
      status: true,
    };
  },
  components: {
    // VueCropper
    // ModelStl,
    // modelList
    ModelGltf,
  },
  mounted() {
    // console.log(this.$refs.model);
    this.axesHelper = new AxesHelper(40);
    // this.$refs.model.scene.add(this.axesHelper)
    // setInterval(() => {
    // 	console.log(this.$refs.model.camera);
    // }, 3000)
  },
  methods: {
    toggleSrc(idx) {
      this.imgSrc = this.arr[idx];
    },
    toggleAxesHelper() {
      if (this.status) {
        this.status = false;
        this.$refs.model.scene.remove(this.axesHelper);
      } else {
        this.status = true;
        this.$refs.model.scene.add(this.axesHelper);
      }
    },
    reduce() {
      if (this.scale !== 0.5) {
        this.scale -= 0.5;
      }
    },
    startCrop() {
      this.$refs.cropper.startCrop();
      this.$refs.cropper.getCropData((data) => {
        // do something
        this.img = data;
      });
    },
    onMouseMove(event) {
      this.light = this.$refs.model.camera.position;
      if (!event) {
        if (this.intersected) {
          this.intersected.material.color.setStyle("#ff4658");
        }

        this.intersected = null;
        return;
      }

      this.intersected = event.object;
      this.intersected.material.color.setStyle("#ff4658");
    },
  },
};
</script>

<style>
</style>
